<%--
  Created by IntelliJ IDEA.
  User: 小袁啊
  Date: 2024/10/29
  Time: 上午8:39
  To change this template use File | Settings | File Templates.
--%>
<style>
    #main3 {
        width: 600px;
        height: 400px;
        float: left;
        /*    左边距*/
        margin-left: 500px;
        /*    居中*/

    }

    #tu3 {
        width: 600px;
        height: 400px;
        float: left;
        align-content: center;
    }

    #main1 {
        width: 600px;
        height: 400px;
        float: left;
        /*    左边距*/
        margin-left: 500px;
        /*    居中*/

    }

    #tu1 {
        width: 600px;
        height: 400px;
        float: left;
        align-content: center;
    }

    #main2 {
        width: 600px;
        height: 400px;
        float: left;
        /*    居中*/

    }

    #tu2 {
        width: 600px;
        height: 400px;
        float: left;
    }

</style>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>统计信息页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--引入echarts--%>
    <script src="../js/echarts.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div id="main1">
        <div id="tu1"></div>
    </div>
    <div id="main2">
        <div id="tu2"></div>
    </div>
    <div id="main3">
        <div id="tu3"></div>
    </div>
</div>
</body>
<script>
    // 创建Vue实例对象
    var vue = new Vue({
        el: '#app',
        data: {
            foldingPanelList: ['1', '2', '3'],
            formTime: {
                time: []
            }
        },
        // 生命周期函数，在创建实例之后调用
        mounted() {
            this.initPie1();
            this.initPie2();
            this.initPie3();
        },
        // 定义方法
        methods: {
            //1   本店盈利统计
            initPie1() {
                var myChart = echarts.init(document.getElementById('tu1'));
                // 配置项 log输出
                myChart.showLoading();
                axios.get('/statistics/getByBranchIdYingLi').then(res => {
                    myChart.hideLoading();
                    myChart.setOption({
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                center: ['50%', '70%'],
                                // adjust the start and end angle
                                startAngle: 180,
                                endAngle: 360,
                                data: res.data.data,
                            }
                        ]
                    })
                })
            },
            //2   计算各门店营业额
            initPie2() {
                var myChart = echarts.init(document.getElementById('tu2'));
                // 配置项 log输出
                myChart.showLoading();
                axios.get('/statistics/getByBranchYingLiE').then(res => {
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text: 'Referer of a Website',
                            subtext: 'Fake Data',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: res.data.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                })
            },
            //3   各各商品销量统计
            initPie3() {
                var myChart = echarts.init(document.getElementById('tu3'));
                // 配置项 log输出
                myChart.showLoading();
                axios.get('/statistics/getStatisticsInfo').then(res => {
                    myChart.hideLoading();
                    myChart.setOption({
                            title: {
                                text: '各商品销量统计'
                            },
                            legend: {},
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: res.data.data.namelist,
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '销量',
                                    type: 'bar',
                                    barWidth: '60%',
                                    data: res.data.data.sumlist
                                }
                            ]
                        }
                    )
                })
            }
        }
    })
</script>
</html>
